<template>
  <div class="home">
    <div class="searh-card"></div>
    <el-container class="relative z-10">
      <el-main>
        <div class="container">
          <!-- 搜索 -->
          <searchCard @query="query" @resetPageInfo="resetPageInfo" />
          <!-- :style="loading ? 'cursor: not-allowed; pointer-events: none' : ''" -->
          <!-- 广告轮播图 -->
          <el-carousel v-if="searchStore.searchType === '1'" height="145px" class="mt-3 rounded-md carousel">
            <el-carousel-item v-for="item in bannerList" :key="item">
              <a :href="item.url==null?'#':'//'+item.url" target="_blank">
                <img :src="hostUrl + item.img" />
              </a>
            </el-carousel-item>
          </el-carousel>
          <!-- 提升权限小广告 -->
          <div :class="(searchStore.searchType !== '1'&&searchStore.searchType !== '2')?'search-info2':''" class="search-info">
            <div>
              <!-- <div v-if="searchStore.searchType === '4'">当前立项结果范围</div> -->
            </div>
            <div>
              <!-- 当前条件下存在
              {{ searchTypeInfos[Number(searchStore.searchType) - 1].name }}
              <span class="text-red-400">
                <template v-if="searchStore.searchType">
                  {{ dataTotal }}
                </template>
              </span> -->
              <!-- {{
                searchTypeInfos[Number(searchStore.searchType) - 1].unit
              }}， -->
              当前可查看
              <span class="text-red-400">
                <template v-if="searchStore.searchType === '1'">
                  <template
                    v-if="auth?.iscCount == -1 || auth?.iscCount > dataTotal"
                  >
                    {{ dataTotal }}
                  </template>
                  <template v-else>
                    {{ auth?.iscCount }}/ {{ dataTotal }}
                  </template>
                </template>
                <template v-else-if="searchStore.searchType === '2'">
                  <template
                    v-if="
                      auth?.policyCount == -1 || auth?.policyCount > dataTotal
                    "
                  >
                    {{ dataTotal }}
                  </template>
                  <template v-else>
                    {{ auth?.policyCount }}/ {{ dataTotal }}
                  </template>
                </template>
                <template v-else-if="searchStore.searchType === '3'">
                  <template
                    v-if="auth?.orgCount == -1 || auth?.orgCount > dataTotal"
                    >{{ dataTotal }}
                  </template>
                  <template v-else>
                    {{ auth?.orgCount }}/ {{ dataTotal }}
                  </template>
                </template>
                <template v-else-if="searchStore.searchType === '4'">
                  <template
                    v-if="auth?.itemCount == -1 || auth?.itemCount > dataTotal"
                    >{{ dataTotal }}
                  </template>
                  <template v-else>
                    {{ auth?.itemCount }}/ {{ dataTotal }}
                  </template>
                </template>
              </span>
              {{ searchTypeInfos[Number(searchStore.searchType) - 1].unit }}
              <span>
                ，欲知更多请
                <router-link to="/vipCenter"
                  ><span class="text-yellow-500 font-bold"
                    >提升权限</span
                  ></router-link
                >
              </span>
            </div>
          </div>
          <div :class="{ 'responsiveOne' : searchStore.searchType === '1' }" class="info-list-tab">
            <div :class="{ 'responsiveTow' : searchStore.searchType === '1' }" class="info-list">
              <div v-if="searchStore.searchType === '1'" ref='occlusionDom' style="width: 100%;background-color: #f7f7f7;z-index: 999;"></div>
              <div
                class="card-list"
                :style="searchStore.searchType !== '4'?'height:800px':''"
                :class="loading ? 'card-loading' : ''"
                v-loading="loading"
                element-loading-text="正在拼命加载中..."
              >
                <!-- <div
                  v-if="
                    !dataList?.length && !loading && searchStore.searchType != '4'
                  "
                  class="empty-box"
                >

                </div> -->
              <!-- <img v-if="searchStore.searchType === '4' && dataList?.length==0" src="../../assets/image/jt.jpg"/> -->
              <!-- :row-class-name="tableRowClassName" -->
              <el-table
                class="mb-5"
                style="width:65vw;border-radius:5px"
                v-if="searchStore.searchType === '4' && dataList?.length"

                :data="dataList"
                :header-cell-style="{ background: '#2186F0', color: '#fff', textAlign: 'center' }"
              >
                <el-table-column
                  type="index"
                  fixed
                  label="序号"
                  width="60"
                  align="center"
                />
                <el-table-column
                  fixed
                  show-overflow-tooltip
                  align="center"
                  label="单位名称"
                >
                  <template #default="scoped">
                    <el-link
                      type="primary"
                      @click="goDetailPage(scoped.row.id, '4',scoped.row.incorporation)"
                      ><span v-if="searchStore?.form4Linght?.includes('1')" v-html="hightLight(searchStore.searchValue,scoped.row.incorporation)"></span>
                      <span v-else>{{scoped.row.incorporation}}</span></el-link
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="project"
                  label="项目名称/其他"
                  align="center"
                  show-overflow-tooltip
                >
                  <template #default="scoped">
                    <span v-if="searchStore?.form4Linght?.includes('2')" v-html="hightLight(searchStore.searchValue,scoped.row.project)"></span>
                    <span v-else>{{ scoped.row.project }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="amount"
                  label="立项金额/其他"
                  align="center"
                  width="120"
                  show-overflow-tooltip
                />
                <el-table-column prop="year" label="项目批次" width="80" align="center" show-overflow-tooltip/>
                <el-table-column prop="status" label="项目状态" width="100" align="center" show-overflow-tooltip/>
                <el-table-column prop="category" label="所属政策" align="center" show-overflow-tooltip>
                  <template #default="scoped">
                    <el-link
                      type="primary"
                      @click="goDetailPage(scoped.row.categoryId, '2')"
                      >{{ scoped.row.category }}</el-link>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="来源" width="100">
                  <template #default="scoped">
                    <el-button
                      type="primary"
                      plain
                      @click="goDetailPage(scoped.row.source, '1')"
                    >
                      来源
                    </el-button>
                  </template>
                </el-table-column> -->
              </el-table>
                <template v-else>
                  <!-- 部门右侧导航栏 -->
                <div v-if="searchStore.searchType === '3'" class="depBroadside">
                  <p style="padding-top:20px;font-weight:700;font-size:18px;margin-bottom:10px">部门直通车</p>
                  <p style="padding: 20px;">政府部门信息一键查询，助您快速了解部门职责、联系方式及最新政策动态</p>
                  <div class="depSeach">
                    <p :class="[ gather==''?'pHover':'' ]" @click="getDepHomeData({searchType:'3',itemGrade:''})">全部</p>
                    <p :class="[ gather=='1'?'pHover':'' ]" @click="getDepHomeData({searchType:'3',itemGrade:'1'})">国家级</p>
                    <p :class="[ gather=='2'?'pHover':'' ]" @click="getDepHomeData({searchType:'3',itemGrade:'2'})">省部级</p>
                    <p :class="[ gather=='3'?'pHover':'' ]" @click="getDepHomeData({searchType:'3',itemGrade:'3'})">地市级</p>
                    <p :class="[ gather=='4'?'pHover':'' ]" @click="getDepHomeData({searchType:'3',itemGrade:'4'})">其他</p>
                  </div>
                </div>
                  <!-- 看资讯 -->
                  <div
                    ref="scrollDom"
                    @scroll="scrollEvent"
                    v-if="searchStore.searchType === '1'"
                    v-infinite-scroll="bottomLoad"
                    infinite-scroll-distance="1"
                    infinite-scroll-delay="1000"
                    :infinite-scroll-immediate="false"
                    :class="searchStore.searchType!='1'?'infinite-list':'infinite-list1 infinite-list'"
                    style="overflow: auto"
                  >
                  <el-empty v-if="dataList.length==0" style="width:65vw" description="换个搜索条件试试吧" />
                    <el-timeline style="width:100%">
                      <template
                        v-for="(item, index) in newsData"
                        :key="item.label"
                      >
                        <el-timeline-item
                          v-if="item.list?.length"
                          :timestamp="item.label"
                          placement="top"
                        >
                          <div
                            v-for="(subItem, subIdx) in item.list"
                            :key="subItem.id"
                            class="info-card"
                          >
                            <infoCard
                              v-if="
                                getOverallIndex(index, subIdx) <=
                                  auth?.iscCount || auth?.iscCount == -1
                              "
                              :info="subItem"
                            />
                          </div>
                        </el-timeline-item>
                      </template>
                    </el-timeline>
                    <!-- 存在查看限制时的逻辑 -->
                  </div>

                  <div
                    v-else
                    v-infinite-scroll="bottomLoad"
                    :infinite-scroll-immediate="false"
                    infinite-scroll-delay="1000"
                    infinite-scroll-distance="1"
                    :class="searchStore.searchType!='1'?'infinite-list':'infinite-list1'"
                    style="overflow: auto"
                  >
                    <el-empty v-if="dataList.length==0" style="width:65vw" description="换个搜索条件试试吧" />
                    <div :class="searchStore.searchType=='1'?'info-card':'info-list-policy'" v-for="(item, index) in dataList" :key="item">
                      <!-- 存在查看限制时的逻辑 index + 1 <= auth?.policyCount &&
                          auth?.policyCount != -1 &&   /// index + 1 <= auth?.orgCount &&
                          auth?.orgCount != -1 &&-->
                      <!-- <infoCard
                        v-if="
                          index + 1 <= auth?.policyCount &&
                          auth?.policyCount != -1 &&
                          searchStore.searchType === '2'
                        "
                        :info="item"
                      /> -->
                      <policyCard v-if="

                          searchStore.searchType === '2'"
                          :data="item"
                        />
                      <!-- <infoCard
                        v-if="
                          index + 1 <= auth?.orgCount &&
                          auth?.orgCount != -1 &&
                          searchStore.searchType === '3'
                        "
                        :info="item"
                      /> -->
                      <depCard v-if="

                          searchStore.searchType === '3'
                        " :data="item"/>
                    </div>
                  </div>
                </template>
              </div>
              <template v-if="searchStore.searchType === '1'">
                <div
                  v-if="
                    pageInfo.pageNum * pageInfo.pageSize > auth?.iscCount &&
                    dataTotal <= dataList.length && dataList.length!=0
                  "
                  class="limit-tips bg-gray-400"
                >
                  <p class="text">没有更多了~</p>
                </div>

                <div
                  v-else-if="
                    pageInfo.pageNum * pageInfo.pageSize >= auth?.iscCount &&
                    auth?.iscCount != -1 &&
                    vipType != 2
                  "
                  class="limit-tips"
                  @click="joinVip"
                >
                  <svg-icon name="lock" color="#fff" size="20px" />
                  <p class="text">成为会员后查看更多资讯</p>
                </div>
                <!-- <div v-if="vipType>0 && dataTotal > dataList.length && dataList.length!=0" style="margin-top:20px;display:flex;justify-content:center;align-items:center">
                  <div @click="bottomLoad" style="background: #409EFF;border-radius: 21px;cursor: pointer;color:#FFFF;width: 175px;height: 42px;line-height:42px;text-align:center">加载更多</div>
                </div> -->
              </template>
              <template v-else-if="searchStore.searchType === '2'">
                <div
                  v-if="
                      pageInfo.pageNum * pageInfo.pageSize > auth?.orgCount &&
                    dataTotal <= dataList.length && dataList.length!=0
                  "
                  class="limit-tips bg-gray-400"
                >
                  <p class="text">没有更多了~</p>

                </div>
                <!-- <div v-if="vipType>0 && dataList.length!=0 && pageInfo.pageNum * pageInfo.pageSize > auth?.policyCount &&
                    dataTotal > dataList.length" style="margin-top:20px;display:flex;justify-content:center;align-items:center">
                  <div @click="bottomLoad" style="background: #409EFF;border-radius: 21px;cursor: pointer;color:#FFFF;width: 175px;height: 42px;line-height:42px;text-align:center">加载更多</div>
                </div> -->
                <div
                  v-else-if="
                    pageInfo.pageNum * pageInfo.pageSize >= auth?.policyCount &&
                    auth?.policyCount != -1 &&
                    vipType != 2
                  "
                  class="limit-tips"
                  @click="joinVip"
                >
                  <svg-icon name="lock" color="#fff" size="20px" />
                  <p class="text">成为会员后查看更多政策</p>
                </div>
              </template>
              <template v-else-if="searchStore.searchType === '3'">
                <!-- <div v-if="vipType>0 && dataList.length!=0 && pageInfo.pageNum * pageInfo.pageSize > auth?.orgCount &&
                    dataTotal > dataList.length" style="margin-top:20px;display:flex;justify-content:center;align-items:center">
                  <div @click="bottomLoad" style="background: #409EFF;border-radius: 21px;cursor: pointer;color:#FFFF;width: 175px;height: 42px;line-height:42px;text-align:center">加载更多</div>
                </div> -->
                <div
                  v-if="
                   pageInfo.pageNum * pageInfo.pageSize < auth?.orgCount &&
                    dataTotal <= dataList.length && dataList.length!=0
                  "
                  class="limit-tips bg-gray-400"
                >
                  <p class="text">没有更多了~</p>
                </div>

                <div
                  v-else-if="
                    pageInfo.pageNum * pageInfo.pageSize >= auth?.orgCount &&
                    auth?.orgCount != -1 &&
                    vipType != 2
                  "
                  class="limit-tips"
                  @click="joinVip"
                >
                  <svg-icon name="lock" color="#fff" size="20px" />
                  <p class="text">成为会员后查看更多部门</p>
                </div>
              </template>
              <template v-else-if="searchStore.searchType === '4'">
                <div
                v-if="
                  pageInfo.pageNum * pageInfo.pageSize >= auth?.itemCount &&
                  auth?.itemCount != -1 &&
                  vipType != 2
                "
                class="limit-tips"
                @click="joinVip"
              >
                <svg-icon name="lock" color="#fff" size="20px" />
                <p class="text">成为会员后查看更多立项</p>
              </div>
              </template>
              <div
                v-if="dataList?.length && searchStore.searchType === '4'"
                class="flex justify-center"
              >

                <el-pagination
                  hide-on-single-page
                  background
                  v-model:current-page="pageInfo.pageNum"
                  layout="prev, pager, next"
                  :total="dataTotal"
                  @current-change="pageInfoChange"
                />
              </div>
            </div>
          <!-- 右侧 -->
            <div :class="{ 'responsiveThree' : searchStore.searchType === '1' }" class="mian-right" v-if="searchStore.searchType === '1'">
              <div class="report">
                <p class="report-font">近期申报</p>
                <div class="font-sort" v-for="(item,index) in hotRepInformationList" :key="item.articleId" @click="goDetailPage(item.articleId,searchStore.searchType)">
                  <div :class="index==0?'sort sortFisrt':index==1?'sort sortSecond':index==2?'sort sortThird':'sort'">{{index+1}}</div>
                  <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.title}}</div>
                </div>
              </div>
              <div class="new-result">
                <div class="new-report-font">最新结果</div>
                <div class="font-sort"  v-for="(item,index) in hotResInformationList" :key="item.articleId" @click="goDetailPage(item.articleId,searchStore.searchType)">
                  <div :class="index==0?'sort sortFisrt':index==1?'sort sortSecond':index==2?'sort sortThird':'sort'">{{index+1}}</div>
                  <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.title}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 侧边栏 小程序 留言板 联系我们 -->
        <div class="side-bar">
          <div class="bar-list">
            <el-popover
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 10px; box-sizing: border-box;"
              trigger="hover"
              placement="left"
            >
              <template #reference>
                <div class="mini-program">
                  <div class="bar-item">
                    <svg-icon name="miniProgram" size="20px" />
                    <p>小程序</p>
                  </div>
                </div>
              </template>
              <template #default>
                <!-- <qrcode-vue value="123" :size="130" level="H" /> -->
                <img src="../../assets/image/qrcode.jpg" style="height:120px;width:120px"/>
              </template>
            </el-popover>
            <div class="bar-item" @click="openQAndA">
              <svg t="1744355264709" name="message" size="20px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2728" width="30" height="30"><path d="M529.6 241.9c-100.2 1-151.9 48.6-171.4 145.1l1.4 0.4c-1.8 2.9-2.8 6.4-2.8 10 0 10.8 8.7 19.5 19.4 19.5s19.4-8.7 19.4-19.5v-0.1C410.4 326 448.3 279.7 531.5 281c52.3 1.9 96.7 42.7 97.1 97.1 1 42.5-22.9 83.7-63.1 111-37.5 25.4-73.4 55.1-72.8 102.5 0 10.7 8.7 19.4 19.4 19.4s19.4-8.7 19.4-19.4c-3-25.4 19.9-48.2 50-67.7 58.6-40.4 87.8-96.8 86.3-146.2 0.2-81.4-57-134.8-138.2-135.8z m370.6 215.2c0-215.2-173.8-389.6-388.1-389.6S124 242 124 457.1c0 184.8 128.2 339.4 300.3 379.4h-0.3s23.4 5.9 32.5 23.4c4.4 8.5 28.1 58.7 42.8 89.3 2 4.1 5.2 11 12.8 11 7.6 0 10.8-6.9 12.8-11 14.7-30.6 38.4-80.8 42.8-89.3 9.1-17.5 32.5-23.4 32.5-23.4h-0.2c172-40 300.2-194.6 300.2-379.4z m-306 340.1h-0.4s-30.4 7.4-40.2 22.7c-25.7 40-41.5 82.1-41.5 82.1s-20.3-50.6-47-89.4c-8.6-12.5-32.3-20.9-32.3-20.9h0.2c-171.2-35.6-270.2-173.5-270.2-338.2 0-191.8 156.4-347.2 349.3-347.2s349.3 155.5 349.3 347.2c0 164.8-107.5 307.5-267.2 343.7z m-73.8-147.5h-16.6c-6.1 0-11.1 5.8-11.1 13v13c0 7.2 5 13 11.1 13h16.6c6.1 0 11.1-5.8 11.1-13v-13c-0.1-7.2-5-13-11.1-13z" p-id="2729" fill="#1176DE"></path></svg>
              <p>AI助手</p>
            </div>
            <div class="bar-item" @click="openChartCard">
              <svg-icon class="svg-icon" name="message" size="20px" />
              <p>留言板</p>
            </div>
            <div class="bar-item" @click="goPage('/aboutUs')">
              <svg-icon name="aboutUs" size="20px" />
              <p>关于我们</p>
            </div>
            <div class="bar-item" @click="openPhoneDialog">
              <!-- <a href="tel:15179935519" class="flex flex-wrap justify-center"> -->
                <svg-icon name="contact" size="20px" />
                <p>联系我们</p>
              <!-- </a> -->
            </div>
            <el-backtop>
              <!-- <div class="toTop"></div> -->
                <!-- <svg-icon name="goTop" size="20px" /> -->
                <!-- <p>直达顶部</p> -->
              
            </el-backtop>
          </div>
        </div>
      </el-main>

    </el-container>
    <el-dialog
      v-model="chatCardStatus"
      align-center
      width="40%"
      :show-close="false"
    >
      <chatCard v-if="chatCardStatus" />
    </el-dialog>
    <div class="footer">
      <div class="us">
        <p class="usInfo">关于我们</p>
        <p class="usInfo">平台服务</p>
        <p class="usInfo" @click="goToXy('userSc')">用户手册</p>
        <p class="usInfo" @click="goToXy('vip')">用户协议</p>
        <p class="usInfo" @click="goToXy('privacy')">隐私政策</p>
        <p class="usInfo" @click="goToXy('user')">会员协议</p>
      </div>
      <div  class="us">
        <span class="usInfo">客服邮箱：1546118975@qq.com</span>
        <span class="usInfo">客服电话：18907485158</span>
        <span class="usInfo">商务合作：1546118975@qq.com</span>

      </div>
      <div  class="us">
        <span class="usInfo">工作时间: 周一至周五 9:00-20:00</span>
        <span class="usInfo">地址：长沙市开福区马栏山视频文创产业园创智园一期</span>
      </div>
      <div>湘公网安备 32059002001234号 | <a href="https://beian.miit.gov.cn" target="_blank">湘ICP备19013947号</a></div>
    </div>
    <el-dialog
      v-model="phoneDialog"
      align-center
      title="复制号码"
      width="600"
      style="padding:10px"
    >
      <div class="flex" style="margin:10px">
        <el-input v-model="phone" disabled />
        <el-button @click="copyLink">复制号码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import searchCard from "./components/searchCard/index.vue";
import infoCard from "../../components/infoCard/index.vue";
import QrcodeVue from "qrcode.vue";
import chatCard from "../../components/chatCard/index.vue";
import policyCard from "../../components/policyCard/index.vue";
import depCard from "../../components/depCard/index.vue";
import {ref,reactive,computed} from 'vue'
import { copyText } from "../../utils/copyText"
import { hightLight  } from '@/utils/index'

import { useHomeHooks } from "./hooks";
import { useSearchStore } from "../../store/search";
const phoneDialog = ref(false)
const searchStore = useSearchStore();

const hostUrl = "https://api.touce.com.cn";
const phone = ref('15179935519')
const {
  gather,
  pageInfoChange,
  dataList,
  newsData,
  handleCardClick,
  query,
  dataTotal,
  pageInfo,
  loading,
  resetPageInfo,
  goDetailPage,
  joinVip,
  auth,
  goPage,
  newsType,
  newsTabClick,
  bottomLoad,
  chatCardStatus,
  openChartCard,
  bannerList,
  searchTypeInfos,
  tableRowClassName,
  vipType,
  hotRepInformationList,
  hotResInformationList,
  getDepHomeData,
  openQAndA
} = useHomeHooks();

const scrollDom = ref<HTMLDivElement>()
const occlusionDom = ref<HTMLDivElement>()

const contentList = computed(() => props.data.map((result) => hightLight(result)));
const getOverallIndex = (index1: any, index2: any) => {
  // 计算总数的方法，你可以根据自己的需求来定义
  let totalIndex = 0;
  for (let i = 0; i < index1; i++) {
    totalIndex += newsData.value[i].list.length;
  }
  return totalIndex + index2 + 1;
};
const goToXy = (val:string)=>{
  window.open(window.location.origin + `/protocol?val=`+val)
}
const openPhoneDialog = ()=>{
  phoneDialog.value = !phoneDialog.value
}
const copyLink = () => {
  copyText(phone.value)
}

const scrollEvent = () => {
  if (searchStore.searchType === '1') {
    if (scrollDom.value!.scrollTop < 20) {
      occlusionDom.value!.style.height = `${scrollDom.value!.scrollTop}px`
    } else {
      occlusionDom.value!.style.height = "20px"
    }
  }
}
</script>

<style scoped lang="postcss">
.home {
  @apply bg-theme-bg;
  .searh-card {
    @apply absolute;
    width: 100vw;
    margin-top: -20px;
    height: 383px;
    background: url("@/assets/image/bg-search-2133a188.png") no-repeat;
    background-size: 100%;
    z-index: 1;
  }
  .container {
    @apply w-2/3 mx-auto;
    .carousel{
      /* top: -50px; */
    }
    .search-info {
      @apply text-right flex justify-between;
      margin-top: 0.75rem;
    }
    .search-info2 {
      @apply text-right flex justify-between;
      margin: 0.75rem 0;
    }
    .info-list-tab{
      @apply w-2/3;
      display:flex;
      justify-content: space-between
    }
    .info-list {
      .empty-box {
        @apply flex items-center justify-center bg-white;
        height: 50vh;
      }
      .card-list {
        display:flex;
        .depBroadside{
          /* height:483px; */
          width:14vw;
          display: flex;
          flex-direction: column;
          align-items: center;
          background-color:#2387EF;
          color:#fff;
          .depSeach{
            margin-top: 10px;
            width:100%;
            p{
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              height: 42px;
              width:100%;
              line-height:42px
            }
            .pHover{
              background-color: rgba(255,255,255,0.4);
            }
          }
        }
        .infinite-list {
          width:65vw;
          max-height: 1100px;
          display: flex;
          /* justify-content:flex-end; */
          flex-wrap: wrap;
        }
        .infinite-list1 {width:45vw;max-height: 1100px;}
        .infinite-list::-webkit-scrollbar {
          display: none;
        }
        .info-list-policy{
          /* margin-top: 50px; */
          display: flex;
        }
      }
      .card-loading {
        min-height: 50vh;
      }
      .limit-tips {
        @apply flex justify-center flex-wrap py-2 mb-3 cursor-pointer;
        background: linear-gradient(to right, #f7f7f7, #5a9cf8 40%, #f7f7f7);
        .text {
          @apply w-full text-center text-white mt-1;
        }
      }
    }
    .mian-right{
      margin-left: 10px;
      width:19vw;
      margin-top: 20px;
      .report,.new-result{
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        border-radius: 0.375rem;
        padding:20px;
        position: relative;
        .report-font,.new-report-font{
          font-weight: bold;
          color: #303133;
          font-size: 16px;
          margin-bottom: 10px;
        }
        .new-report-font{
          color: #1488FF;
        }
        .report-font::before{
          content: '';
          width: 66px;
          height: 2px;
          position: absolute;
          left: 20px;
          top: 44px;
          background-color: #0B0B0B;
        }
        .new-report-font::before{
          content: '';
          width: 66px;
          height: 2px;
          position: absolute;
          left: 20px;
          top: 44px;
          background-color: #1488FF;
        }
        .font-sort{
          font-size: 12px;
          cursor: pointer;
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          color: #525252;
          .sort{
            width: 20px;
            height:20px;
            text-align: center;
            line-height: 20px;
            margin-right:5px;
            color:#909399;
            flex-shrink:0;
          }
          .sortFisrt{
            color: #fff;
            background-color: #FF5067;
          }
          .sortSecond{
            color: #fff;
            background-color: #FD6E4C;
          }
          .sortThird{
            color: #fff;
            background-color: #FDCB50;
          }
        }
      }
      .new-result{
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        margin-top: 20px;
        .report-font{
          color: #409EFF;
        }
      }
    }
  }
  .side-bar {
    @apply fixed right-6;
    top: 50%;
    .bar-item {
      @apply bg-white py-4 flex justify-center flex-wrap cursor-pointer;
      font-size: 12px;
      color: #1176DE;
      margin-top: 2px;
      :deep(.svg-icon) {
        fill: #1176DE;
      }
      &:hover {
        @apply bg-theme-color text-white;
        :deep(.svg-icon) {
          fill: white;
        }
      }
      p {
        @apply w-full text-center mt-2;
      }
    }
    .toTop{
      border-radius: 50px;
      background-image: url('../../assets/image/fanhuidingbu.jpg');
      background-size: cover; /* 背景图片覆盖整个元素 */
      background-repeat: no-repeat; /* 背景图片不重复 */
      background-position: center; /* 背景图片居中 */
      width: 40px; /* 元素宽度 */
      height: 40px;
    }
    /* :deep(.el-backtop) {
      @apply mt-8;
      width: 100%;
      position: relative !important;
      right: 0 !important;
      bottom: 0 !important;
    } */
  }
  :deep(.el-dialog) {
    @apply p-0 rounded-lg;
    .el-dialog__header {
      @apply p-0;
    }
    .el-dialog__body {
      @apply p-0;
    }
  }
  :deep(.el-timeline-item__node) {
    background: #5a9cf8;
    left: 0;
  }
  :deep(.el-timeline-item__content){
    background-color: #fff;
  }
  .info-card:not(:last-child){
    @apply border-b
    /* border-bottom: 2px solid;
    border-image:linear-gradient(90deg, rgba(0, 216, 247, 0) 5%, #E5E5E5 0%,rgba(255,255,255,0) 99%)2 2 2 2; */
}
.el-carousel__container{
  width: 64.4vw;
}
.footer{
  height: 213px;
  background: #333333;
  /* font-family: Microsoft YaHei; */
  color: #F3F3F3;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.us{
  display: flex;
  margin-bottom: 20px;
}
.usInfo{
  margin: 0 20px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.usInfo:not(:last-child)::after{
  content: '';
  width: 2px;
  height: 19px;
  position: absolute;
  bottom: 0;
  top: 0px;
  margin: 0 20px;
  background-color: #F3F3F3;
}
}

.responsiveOne {
  width: 100% !important;
}

.responsiveTow {
  width: 70% !important;
}

.responsiveThree {
  width: 29% !important;
}
</style>
